<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" href="css/nav.css" />
		<link rel="stylesheet" href="css/menu.css" />
		<link rel="stylesheet" href="css/notice.css" />
		<link rel="stylesheet" href="css/slide.css" />
		<link rel="stylesheet" href="css/card.css" />
		<link rel="stylesheet" href="css/main-content.css" />
		<link rel="stylesheet" href="css/end.css" />
		<title>动物世界</title>
	</head>
	<body>
		<!-- 头部 -->
		<header>
			<img class="LOGO" src="img/头部1.jpg" width="150" height="100"/>
			<img src="img/头部2.jpg" width="300"/>
			<button class="favorite-btn">
                我的收藏
            </button>
		</header>
		
		<!-- 导航栏 -->
		<nav>
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">猫舍狗窝</a></li>
				<li><a href="#">濒危生物</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
		</nav>
		
		<!-- 弹出菜单 -->
		<ul class="menu">
		  <li>
		    <a>微博</a>
		    <ul>
		      <li>
		        <a href="">私信</a>
		      </li>
		      <li>
		        <a href="">评论</a>
		      </li>
		      <li>
		        <a href="">@我</a>
		      </li>
		    </ul>
		  </li>
		  <li>
		    <a>留言板</a>
		    <ul>
		      <li>
		        <a href="">私信1</a>
		      </li>
		      <li>
		        <a href="">评论1</a>
		      </li>
		      <li>
		        <a href="">@我</a>
		      </li>
		    </ul>
		  </li>
		  <li>
		    <a>电话</a>
		    <ul>
		      <li>
		        <a href="">私信2</a>
		      </li>
		      <li>
		        <a href="">评论2</a>
		      </li>
		      <li>
		        <a href="">@我</a>
		      </li>
		    </ul>
		  </li>
		  <li>
		    <a>邮箱</a>
		    <ul>
		      <li>
		        <a href="">私信3</a>
		      </li>
		      <li>
		        <a href="">评论3</a>
		      </li>
		      <li>
		        <a href="">@我</a>
		      </li>
		    </ul>
		  </li>
		</ul>
		
		<div class="things">
		    	
		     <div class="stages">
		     	事件
		     </div>
		    	
		    <ul>
		        <li><a href="#">"领养一只猫"活动正在进行中</a></li>
		        <li><a href="#">点击跳转动物灭绝年代顺序表</a></li>
		    </ul>
		    
		
		</div>
		
		<!-- 轮播图 -->
		<div class="slider">
		    <div class="slides">
		        <div class="slide">1</div>  <!-- 幻灯片1 -->
		        <div class="slide">2</div>  <!-- 幻灯片2 -->
		        <div class="slide">3</div>  <!-- 幻灯片3 -->
		        <div class="slide">4</div>  <!-- 幻灯片4 -->
		        <div class="slide">5</div>  <!-- 幻灯片5 -->
		    </div>
		</div>
		
		
		<div class="card-container">
		  <div class="card">
		    <h3>昆虫专题</h3>
		    <p><a href="#">测试一下你对昆虫了解多少</a></p>
		  </div>
		  <div class="card">
		    <h3>动物发展史</h3>
		    <p><a href="#">一起了解动物的进化史</a></p>
		  </div>
		  <div class="card">
		    <h3>动物摄影展</h3>
		    <p><a href="#">去发现你身边的小动物吧</a></p>
		  </div>
		</div>
		

			<div class="container">
			    <div class="section" style="width: 32%;">
			      <div class="section-title">
			        <span>动物世界频道</span>
			       <a href="#">more &gt</a>
			      </div>
			    <div>
					  <h3>在东非草原上，狮群默契协作，将角马群分割围猎，上演着生死时速的生存博弈。</h3>
					  <h3>而在南美洲雨林，树懒以“慢节奏”生活著称，每分钟仅挪动1.8 - 2.4米，身上的藻类更成了天然保护色。</h3>
					  <h3>中国国宝大熊猫，因竹子周期性枯萎、栖息地破碎，一度濒危。好在人工繁育与生态保护显效，野外种群回升至1800多只。</h3>
					  <h3>海洋里的棱皮龟，却因塑料污染与非法捕捞，全球数量不足3万只，亟待人类援手。</h3>
					  <img src="img/频道1.jpg"/>
					  <h3>凶猛的北极熊幼崽，实则是爱撒娇打滚的“萌团子”；寒冬时，熊妈妈会用怀抱为幼崽挡住极地的刺骨寒风 ，尽显温情。</h3></div>
			          <h3>在马达加斯加的雨林里，指猴用细长手指敲击树干，精准找到藏在深处的幼虫，独特觅食方式堪称自然界的“啄木鸟”。</h3>
					  <h3>北极苔原上，北极狐会随着季节变换毛色，夏季灰褐融入岩石，冬季雪白与冰雪同色，上演着天然的“换装魔术”。</h3>
					  <img src="img/频道2.jpg"/>
			    </div>
				
			
			
			    <div class="section" style="width: 700px;">
			      <div class="section-title">
			        <span>动物保护专题</span>
			        <a href="#">more &gt</a>
			      </div>
			      <ul class="protect">
			        <li><img src="img/动物保护1.jpg"/><a href="#">世界灭绝动物墓地</a></li>
			        <li><img src="img/动物保护2.jpg"/><a href="#">世界灭绝动物墓地</a></li>
			      </ul>
			
			      <div class="section-title" style="margin-top: 20px;">
			        <span>摄影展作品欣赏</span>
			        <a href="#">more &gt</a>
			      </div>
			      <div class="photo-list">
			        <div class="photo-item">
			          <img src="img/摄影1.jpg"  alt="作品1">
			          <p></p >
			        </div>
			        <div class="photo-item">
			          <img src="img/摄影2.jpg" alt="作品2">
			          <p></p >
			        </div>
			        <div class="photo-item">
			          <img src="img/摄影3.jpg" alt="作品3">
			          <p></p >
			        </div>
			        <div class="photo-item">
			          <img src="img/摄影4.jpg" alt="作品4">
			          <p></p >
			        </div>
			      </div>
			</div>
				
			<div class="end_con">
				    <p>版权所有： </p>
				    <p>地址：</p>
				    <p>电话： 传真： 邮箱: </p>
			</div>

		
	</body>
</html>
